<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 3px solid deepskyblue;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .box>ul {
            height: 60px;
            display: flex;
        }

        .box>ul>li {
            flex: 1;
            background-color: deepskyblue;
            color: #fff;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box>ul>li.active {
            background: gold;
        }

        .box>ol {
            flex: 1;
            position: relative;
        }

        .box>ol>li {
            width: 100%;
            height: 100%;
            background: purple;
            position: absolute;
            left: 0;
            top: 0;
            font-size: 100px;
            display: none;
        }

        .box>ol>li.active {
            display: block;
        }






        .box1 {
            width: 600px;
            height: 400px;
            border: 3px solid deepskyblue;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .box1>ul {
            height: 60px;
            display: flex;
        }

        .box1>ul>li {
            flex: 1;
            background-color: deepskyblue;
            color: #fff;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box1>ul>li.active {
            background: gold;
        }

        .box1>ol {
            flex: 1;
            position: relative;
        }

        .box1>ol>li {
            width: 100%;
            height: 100%;
            background: purple;
            position: absolute;
            left: 0;
            top: 0;
            font-size: 100px;
            display: none;
        }

        .box1>ol>li.active {
            display: block;
        }
    </style>
</head>

<body>

    <div class="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
    <div class="box1">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>>

</body>
<script>
    // let btn = document.querySelectorAll('ul > li')
    // // 给ul>li添加按钮
    // let tab = document.querySelectorAll('ol > li')
    // // 给ol>li添加选项切换
    // btn.forEach(function (item, index) {
    //     item.onclick = function () {
    //         // 利用遍历给所有的按钮添加点击事件
    //         btn.forEach(function (item, index) {
    //             item.className = ''
    //             tab[index].className = ''
    //             // 给按钮和切换盒子里的类名设置为空
    //         })
    //         item.className = 'active'
    //         tab[index].className = 'active'
    //     }
    // }) 


    class tab 
    {
        constructor(ulli, olli) {
            this.ulli = document.querySelectorAll(ulli)
            this.olli = document.querySelectorAll(olli)
            this.change()
        }
        change() {
            this.ulli.forEach((item, index) => {
                item.onclick = () => {
                    this.ulli.forEach(item => {
                        item.className = ''
                    })
                    this.olli.forEach(item => {
                        item.className = ''
                    })
                    item.className = 'active'
                    this.olli[index].className = 'active'
                }
            })
        }
    }
    new tab('.box>ul>li', '.box>ol>li')
    new tab('.box1>ul>li', '.box1>ol>li')
</script>